<template>
  <view class="goods-detail">
    <!-- 商品图片 -->
    <view class="goods-image-container">
      <image :src="goods.image" class="goods-image" mode="aspectFill"></image>
    </view>
    <!-- 商品信息 -->
    <view class="goods-info-container">
      <view class="goods-name">{{ goods.name }}</view>
      <view class="goods-price">价格: {{ goods.price }} 元</view>
      <view class="goods-specification">规格: {{ goods.unit }}</view>
      <view class="goods-category"
        >分类: {{ getCategoryName(goods.category_id) }}</view
      >
      <view class="goods-introduction">
        <text>商品介绍:</text>
      </view>
      <view class="goods-introduction">
        <text>{{ goods.introduction }}</text>
      </view>
      <view class="goods-introduction">
        审核状态:
        <span class="examine-status-text">{{
          getExamineStatusText(goods.examine_status)
        }}</span>
      </view>
      <!-- 新增审核状态显示 -->
      <view class="goods-examine-status">
        <!-- 新增下架按钮，当审核状态为通过且 status 不为 hidden 时显示 -->
        <button
          v-if="goods.examine_status === 1 && goods.status !== 'hidden'"
          @click="upDownGoods(goods.id)"
          class="action-button down-button"
        >
          下架
        </button>
        <!-- 新增上架按钮，当 status 为 hidden 时显示 -->
        <button
          v-if="goods.status === 'hidden'"
          @click="upDownGoods(goods.id)"
          class="action-button up-button"
        >
          上架
        </button>
      </view>
      <!-- 新增驳回原因显示 -->
      <view class="goods-examine-reason" v-if="goods.examine_status === 2">
        驳回原因: {{ goods.examine_reason }}
      </view>
    </view>
  </view>
</template>

<script>
var app = getApp();
import ikz from "@/pages/Common/tools.js";

export default {
  data() {
    return {
      goods: {},
      classificationList: [],
      isMounted: false,
    };
  },
  onLoad(options) {
    // 从路由参数中获取商品ID
    const goodsId = options.id;
    // 显示加载提示
    uni.showLoading({
      mask: true,
    });
    this.getGoodsDetail(goodsId);
    this.getCategoryList(); // 获取商品分类列表
  },
  mounted() {
    this.isMounted = true; // 视图渲染完成后设置标志位为 true
  },
  methods: {
    // 获取商品详情
    getGoodsDetail(goodsId) {
      var path = "/xyb/supermarket/goods/detail";
      var data = {
        id: goodsId,
      };
      ikz.get(path, data, (res) => {
        const goodsData = {
          ...res.data.data,
          image: app.globalData.adminImgPath + "/" + res.data.data.image,
        };
        this.goods = goodsData;
        // 隐藏加载提示
        uni.hideLoading();
      });
    },
    getCategoryName(categoryId) {
      if (!this.isMounted || !this.classificationList) return "未知分类"; // 检查视图是否渲染完成和分类列表是否存在
      const category = this.classificationList.find(
        (item) => item.id === categoryId
      );
      return category ? category.name : "未知分类";
    },
    getCategoryList() {
      // 显示加载提示
      uni.showLoading({
        mask: true,
      });
      var path = "/xyb/supermarket/goods/category";
      var data = {
        token: uni.getStorageSync("local_user_session"),
      };
      ikz.get(path, data, (res) => {
        this.classificationList = res.data.data; // 更新分类列表
        // 隐藏加载提示
        uni.hideLoading();
      });
    },
    // 新增方法：根据审核状态返回文本
    getExamineStatusText(status) {
      switch (status) {
        case 0:
          return "待审核";
        case 1:
          return "通过";
        case 2:
          return "拒绝";
        default:
          return "未知状态";
      }
    },
    /**
     * 上架或下架商品
     * @param {number} goodsId - 商品的ID
     */
    upDownGoods(goodsId) {
      // 显示加载提示
      uni.showLoading({
        mask: true,
      });
      var path = "/xyb/supermarket/goods/upDown";
      var data = {
        id: goodsId,
      };
      ikz.get(path, data, (res) => {
        if (res.data.code === 1) {
          // 操作失败，提示用户
          uni.showToast({
            title: this.goods.status === "hidden" ? "上架成功" : "下架成功",
            icon: "none",
          });
          this.getGoodsDetail(goodsId);
        }
        // 隐藏加载提示
        uni.hideLoading();
      });
    },
  },
};
</script>

<style scoped>
.goods-detail {
  padding: 20rpx;
}

.goods-image-container {
  text-align: center;
  margin-bottom: 20rpx;
}

.goods-image {
  width: 300rpx;
  height: 300rpx;
}

.goods-info-container {
  padding: 20rpx;
  background-color: #FFFFFF;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.goods-name {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.goods-price {
  font-size: 32rpx;
  color: #f00;
  margin-bottom: 10rpx;
}

.goods-introduction {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.goods-specification,
.goods-category {
  font-size: 28rpx;
  color: #999;
}

.back-button-container {
  margin-top: 30rpx;
  text-align: center;
}

/* 新增样式 */
.goods-examine-status,
.goods-examine-reason {
  font-size: 28rpx;
  color: #999;
}

/* 调整审核状态容器的样式，让按钮向下移动 */
.goods-examine-status {
  margin-top: 20rpx; /* 可以根据需要调整这个值 */
}

/* 按钮通用样式 */
.action-button {
  padding: 10rpx 20rpx;
  border: none;
  border-radius: 8rpx;
  font-size: 28rpx;
  margin-left: 10rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

/* 下架按钮样式 */
.down-button {
  background-color: #ff4d4f;
  color: #fff;
}

/* 上架按钮样式 */
.up-button {
  background-color: #1890ff;
  color: #fff;
}
.examine-status-text {
  color: #FF5722;
}
</style>
  